<template>
  <div>
    <div
      class="change-title"
    >贵司选择的申请融资产品{{infoDetails.product.shortTermProducts.length + infoDetails.product.middleTermProducts.length + infoDetails.product.longTermProducts.length}}个:</div>
    <div class="change-div">
      <div
        @click="infoDetails.product.shortTermProducts && infoDetails.product.shortTermProducts.length ? tabIndex = 0 : null"
        :class="{'active-class' : tabIndex == 0}"
      >
        短期({{infoDetails.product.shortTermProducts ? infoDetails.product.shortTermProducts.length : 0}})
        <span
          v-if="tabIndex == 0"
        ></span>
      </div>
      <div
        @click="infoDetails.product.middleTermProducts && infoDetails.product.middleTermProducts.length ? tabIndex = 1 : null"
        :class="{'active-class' : tabIndex == 1}"
      >
        中期({{infoDetails.product.middleTermProducts ? infoDetails.product.middleTermProducts.length : 0}})
        <span
          v-if="tabIndex == 1"
        ></span>
      </div>
      <div
        @click="infoDetails.product.longTermProducts && infoDetails.product.longTermProducts.length ? tabIndex = 2 : null"
        :class="{'active-class' : tabIndex == 2}"
      >
        长期({{infoDetails.product.longTermProducts ? infoDetails.product.longTermProducts.length : 0}})
        <span
          v-if="tabIndex == 2"
        ></span>
      </div>
    </div>
    <ul class="list-content">
      <li
        v-if="tabIndex == 2 && infoDetails.product.longTermProducts && infoDetails.product.longTermProducts.length"
      >
        <Swipe class="my-swipe" :loop="false"  :show-indicators="false">
          <SwipeItem v-for="(item, index) in infoDetails.product.longTermProducts" :key="index">
            <div class="list">
              <h2>
                <span>{{item.productName}}</span>
                <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
              </h2>
              <div>{{item.productDescribe}}</div>
              <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
              <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
              <div class="dkjg">
                <span>贷款机构：{{item.lendingProviderName}}</span>
                <span>
                  <span
                    style="font-size:18px; color:#2F54EB; font-weight:bold"
                  >{{item.loanPeriodMax}}</span>
                  <span>期</span>
                </span>
              </div>
            </div>
            <!-- 进度 -->
            <Steps
              direction="vertical"
              :active="item.flow"
              inactive-color="#969799"
              active-color="#07c160"
              style="border-bottom: 10px"
            >
              <Step>
                <div>申请中</div>
              </Step>
              <Step>
                <div>待风控审核</div>
              </Step>
              <Step>
                <div>待付款前置收费项</div>
              </Step>
              <Step>
                <div>待放款机构审核</div>
              </Step>
              <Step>
                <div>待银行/机构签约放款</div>
              </Step>
              <Step>
                <div>待付款服务费</div>
              </Step>
              <Step>
                <div>服务完成</div>
              </Step>
            </Steps>

            <div style="border-bottom: 1px solid #eee; margin: 5px 0;"></div>

            <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
              <Step>
                <div>可申请产品数：{{infoDetails.product.longTermProducts.length}}个</div>
              </Step>
              <Step>
                <div>可申请总额度：{{item.approvalAmountMax}}万</div>
              </Step>
              <Step>
                <div>还款方式：{{item.repaymentMethodStr}}</div>
              </Step>
              <Step>
                <div>申请方式：{{item.applicationMethodStr}}</div>
              </Step>
              <Step>
                <div>担保方式：{{item.guaranteeMethodStr}}</div>
              </Step>
            </Steps>
          </SwipeItem>
        </Swipe>
      </li>

      <li
        v-if="tabIndex == 1 && infoDetails.product.middleTermProducts && infoDetails.product.middleTermProducts.length"
      >
        <Swipe class="my-swipe" :loop="false"  :show-indicators="false">
          <SwipeItem v-for="(item, index) in infoDetails.product.middleTermProducts" :key="index">
            <div class="list">
              <h2>
                <span>{{item.productName}}</span>
                <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
              </h2>
              <div>{{item.productDescribe}}</div>
              <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
              <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
              <div class="dkjg">
                <span>贷款机构：{{item.lendingProviderName}}</span>
                <span>
                  <span
                    style="font-size:18px; color:#2F54EB; font-weight:bold"
                  >{{item.loanPeriodMax}}</span>
                  <span>期</span>
                </span>
              </div>
            </div>

            <!-- 进度 -->
            <Steps
              direction="vertical"
              :active="item.flow"
              inactive-color="#969799"
              active-color="#07c160"
              style="border-bottom: 10px"
            >
              <Step>
                <div>申请中</div>
              </Step>
              <Step>
                <div>待风控审核</div>
              </Step>
              <Step>
                <div>待付款前置收费项</div>
              </Step>
              <Step>
                <div>待放款机构审核</div>
              </Step>
              <Step>
                <div>待银行/机构签约放款</div>
              </Step>
              <Step>
                <div>待付款服务费</div>
              </Step>
              <Step>
                <div>服务完成</div>
              </Step>
            </Steps>

            <div style="border-bottom: 1px solid #eee; margin: 5px 0;"></div>

            <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
              <Step>
                <div>可申请产品数：{{infoDetails.product.middleTermProducts.length}}个</div>
              </Step>
              <Step>
                <div>可申请总额度：{{item.approvalAmountMax}}万</div>
              </Step>
              <Step>
                <div>还款方式：{{item.repaymentMethodStr}}</div>
              </Step>
              <Step>
                <div>申请方式：{{item.applicationMethodStr}}</div>
              </Step>
              <Step>
                <div>担保方式：{{item.guaranteeMethodStr}}</div>
              </Step>
            </Steps>
          </SwipeItem>
        </Swipe>
      </li>

      <li
        v-if="tabIndex == 0 && infoDetails.product.shortTermProducts && infoDetails.product.shortTermProducts.length"
      >
        <Swipe class="my-swipe" :loop="false"  :show-indicators="false">
          <SwipeItem v-for="(item, index) in infoDetails.product.shortTermProducts" :key="index">
            <div class="list">
              <h2>
                <span>{{item.productName}}</span>
                <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
              </h2>
              <div>{{item.productDescribe}}</div>
              <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
              <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
              <div class="dkjg">
                <span>贷款机构：{{item.lendingProviderName}}</span>
                <span>
                  <span
                    style="font-size:18px; color:#2F54EB; font-weight:bold"
                  >{{item.loanPeriodMax}}</span>
                  <span>期</span>
                </span>
              </div>
            </div>

            <!-- 进度 -->
            <Steps
              direction="vertical"
              :active="item.flow"
              inactive-color="#969799"
              active-color="#07c160"
              style="border-bottom: 10px"
            >
              <Step>
                <div>申请中</div>
              </Step>
              <Step>
                <div>待风控审核</div>
              </Step>
              <Step>
                <div>待付款前置收费项</div>
              </Step>
              <Step>
                <div>待放款机构审核</div>
              </Step>
              <Step>
                <div>待银行/机构签约放款</div>
              </Step>
              <Step>
                <div>待付款服务费</div>
              </Step>
              <Step>
                <div>服务完成</div>
              </Step>
            </Steps>

            <div style="border-bottom: 1px solid #eee; margin: 5px 0;"></div>

            <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
              <Step>
                <div>可申请产品数：{{infoDetails.product.shortTermProducts.length}} 个</div>
              </Step>
              <Step>
                <div>可申请总额度：{{item.approvalAmountMax}}万</div>
              </Step>
              <Step>
                <div>还款方式：{{item.repaymentMethodStr}}</div>
              </Step>
              <Step>
                <div>申请方式：{{item.applicationMethodStr}}</div>
              </Step>
              <Step>
                <div>担保方式：{{item.guaranteeMethodStr}}</div>
              </Step>
            </Steps>

            <div class="mt10">
              <div class="money-box">
                <div class="top-div">
                  <div>服务费用</div>
                  <div>服务费率{{item.charges[index].rate ? item.charges[index].rate : "(无)"}}</div>
                </div>
                <div class="mt15">{{item.charges[index].type == 1 ? '前置费用' : '咨询服务费'}} : {{item.charges[index].value}}</div>
              </div>
            </div>
          </SwipeItem>
        </Swipe>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
// import VueAwesomeSwiper from "vue-awesome-swiper";
// import "swiper/dist/css/swiper.css";
// import { swiper, swiperSlide } from "vue-awesome-swiper";
// Vue.use(VueAwesomeSwiper);
import { Step, Steps, Swipe, SwipeItem } from "vant";
export default {
  props: {
    infoDetails: {
      required: true,
      type: Object,
    },
  },
  components: {
    Step,
    Steps,
    Swipe,
    SwipeItem,
  },
  data() {
    return {
      tabIndex: 0,
      swiperWidth: window.innerWidth - 70,
    };
  },
  mounted() {
    if (
      this.infoDetails.product.longTermProducts &&
      this.infoDetails.product.longTermProducts.length
    )
      this.tabIndex = 2;
    if (
      this.infoDetails.product.middleTermProducts &&
      this.infoDetails.product.middleTermProducts.length
    )
      this.tabIndex = 1;
    if (
      this.infoDetails.product.shortTermProducts &&
      this.infoDetails.product.shortTermProducts.length
    )
      this.tabIndex = 0;
  },
};
</script>

<style lang="stylus" scoped>
@import './../../../assets/styl/mixin.styl'
.mt10
  margin-top rem(10)
.change-title
  color $fontColor
  font-size rem(13)
.change-div
  margin-top rem($m15)
  display flex
  justify-content space-around
  text-align center
  flex 1
  font-size rem($ft16)
  color #999999
  div
    width rem(94)
    height rem(16)
  .active-class
    color $baseColor
    text-align center
    :after
      display block
      content url('./../../../assets/image/active-class.png')
// .swiper-container
// margin-left auto
// margin-right auto
// position relative
// overflow auto
// list-style none
// padding 0
// z-index 1
// .swiper-slide
// // background red
// margin-top rem(27)
// height rem(144)
// width rem(307)
// box-shadow rem(0) rem(2) rem(12) rem(0) rgba(0, 0, 0, 0.1)
// border-radius rem(4)
// border-left rem(4) solid $baseColor
// .swiper-box
// display flex
// flex-direction column
// font-size rem(13)
// padding rem(15)
// .top-div
// display flex
// justify-content space-between
// font-size rem(15)
// font-weight bold
// .mt10
// margin-top rem(10)
// .mt15
// margin-top rem(15)
// .bottom-div
// display flex
// justify-content space-between
// font-size rem(15)
// .swiper-pagination-bullet
// background-color #FFFFFF
// width 16px
// height 2px
// border-radius 3px
// bottom -10px
// opacity 0.5
// .swiper-pagination-bullet-active
// background-color $baseColor
// width 16px
// height 2px
// border-radius 3px
// opacity 1
.list-content
  margin-top rem(10)
  padding-bottom rem(20)
  li
    background-color #fff
    border-top 0
    .list
      height rem(144)
      border-radius rem(6)
      border-left rem(4) solid #2F54EB
      box-shadow rem(0) rem(0) rem(5) rgba(0, 0, 0, 0.2)
      padding rem(10) rem(15)
      box-sizing border-box
      margin rem(10)
      line-height rem(24)
      h2, .dkjg
        display flex
        justify-content space-between
[class*=van-hairline]::after
  border 0
>>> .van-step__title
  color #333 !important
>>> .van-step--vertical
  padding rem(5) rem(5) rem(5) 0
.lines
  display flex
  align-items center
.tabstep-info
  margin-top rem($m30)
  .van-step--vertical:not(:last-child)::after
    border-bottom none !important
  .van-step__title--active
    color $titleColor !important
  .van-step--vertical
    font-size rem($ft15)
    color $titleColor
.describe .li
  font-size rem(15)
  font-weight 400
  color #333333
  line-height rem(35)
  position relative
  padding-left rem(20)
  position relative
  display flex
  align-items center
  ::before
    content ''
    width rem(5)
    height rem(5)
    border-radius 50%
    position absolute
    left 0
    top rem(15)
    display inline-block
    background #2F54EB
  ::after
    position absolute
    content ''
    border-left rem(1) dashed #2F54EB
    left rem(2)
    top rem(15)
    height 100% /* calc(100% - 10px) */
.money-box
  display flex
  font-size rem(15)
  flex-direction column
  color #333
  padding rem(20) rem(15)
  .top-div
    display flex
    justify-content space-between
    color #999
    :first-child
      color #333
      font-weight bold
  .mt10
    margin-top rem(10)
  .mt15
    margin-top rem(15)
</style>
<style scoped>
</style>